<template>
<div>
<!--  条件查询栏-->
  <div style="margin: 10px 0">
    <!-- 选择创建日期-->
    <el-date-picker class="createRepairsTime"
      v-model="searchAdminRepairs.creatTime"
      align="right"
      type="date"
      placeholder="选择创建日期"
      :picker-options="pickerOptions">
    </el-date-picker>
    <!--    选择更新日期-->
    <el-date-picker class="updateRepairsTime"
      v-model="searchAdminRepairs.updateTime"
      align="right"
      type="date"
      placeholder="选择更新日期"
      :picker-options="pickerOptions">
    </el-date-picker>
    <!--可加一个select选择，显示all，未休，已修，进行筛选list-->
    <el-select v-model="searchAdminRepairs.repairStatus" clearable placeholder="请选择修理状态" style="margin-left: 5px;">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-button type="warning" @click="getList(1)" style="margin-left: 10px;">查 询</el-button>
    <el-button type="primary" @click="handleAdd" style="margin-left: 10px;">添加报修<i class="el-icon-circle-plus-outline"></i></el-button>
  </div>
<!-- list-->
  <template>
<!--在这里直接绑定tableData-->
    <el-table
        :data="tableData.list"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          type="index"
          label="序号"
          width="50">
      </el-table-column>
      <el-table-column
          prop="user.userName"
          label="报修人"
          width="180">
        <!-- 长文本缩略显示为XXX...-->
        <template slot-scope="scope">
            <span :title="scope.row.user?.userName">
              {{ scope.row.user?.userName ? (scope.row.user.userName.length > 5 ? scope.row.user.userName.substring(0,5) + '...' : scope.row.user.userName) : '——' }}
            </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="(row) => $options.filters.formatDateTime(row.creatTime)"
          width="120">
      </el-table-column>
      <el-table-column
          prop="admin.adminName"
          label="更新人">
        <template slot-scope="scope">
            <span :title="scope.row.admin?.adminName">
              {{ scope.row.admin?.adminName ? (scope.row.admin.adminName.length > 5 ? scope.row.admin.adminName.substring(0,5) + '...' : scope.row.admin.adminName) : '——' }}
            </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间"
          :formatter="(row) => $options.filters.formatDateTime(row.updateTime)"
          width="120">
      </el-table-column>
      <el-table-column prop="repairStatus" label="维修状态">
        <template #default="{ row }">
          <span v-if="row.repairStatus === true">已修理</span>
          <span v-else-if="row.repairStatus === false" style="color: red">未修理</span>
          <span v-else style="color: gray">未知状态</span>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="报修详情"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleLook(scope.row)" type="text" size="small">查看报修详情</el-button>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
        <!--这样写是为了当已修理时，业主不可修改报修信息-->
          <el-button @click="handleUpdate(scope.row)"
             type="text" size="small" :disabled="scope.row.repairStatus===true"
             :title="scope.row.repairStatus===true?'不可修改':''">修改</el-button>
          <el-button
              @click="handleDelete(scope.row)"
              type="text"
              :style="{color: scope.row.repairStatus ? 'gray' : 'red'}"
              size="small"
              :disabled="scope.row.repairStatus===true"
              :title="scope.row.repairStatus===true?'不可删除':''">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <!--分页页码-->
  <div>
    <el-pagination class="pageNum"
     background
     layout="prev, pager, next"
     @current-change="handlePageNumChange"
     :page-size="tableData.pageSize"
     :total="tableData.total"
     :current-page="tableData.pageNum">
    </el-pagination>
  </div>
<!-- 新增报修信息对话框,尝试用同一个el-dialog显示不同内容 -->
<!--  使用:show-close="dialogMode !== 'fillReturn'"实现回访反馈弹窗没有右上角x号，只能点确定退出弹窗-->
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="40%" @close="resetDialog" :show-close="dialogMode !== 'fillReturn'">
<!--    新增报修信息表单-->
    <el-form v-if="dialogMode==='add'" :model="addFrom" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
      <!-- WangEdit-->
    <my-editor v-model="addFrom.userRepair.content" :server="uploadSever"></my-editor>
    </el-form>
<!--  @submit.native.prevent:model="updateFrom"是阻止updateForm表单自动提交防止请求两次  -->
    <el-form v-if="dialogMode==='update'" @submit.native.prevent:model="updateFrom" :rules="rules" ref="updateForm" label-width="100px" class="demo-ruleForm">
      <!-- ref暴露编辑器实例，供update方法使用-->
      <my-editor ref="editor" v-model="updateFrom.userRepair.content" :server="uploadSever"></my-editor>
    </el-form>
    <!-- 查看详情弹出内容 -->
    <div v-else-if="dialogMode === 'view'" class="view-content">
      <div class="repair-detail" style="position: relative; top: -60px">
        <!-- 维修状态 -->
        <div class="status-section">
          <h4>维修状态：</h4>
          <div
              class="status-badge"
              :class="{
                'repaired': adminRepair?.repairStatus === true,
                'unrepaired': adminRepair?.repairStatus === false,
                'unknown': adminRepair?.repairStatus == null
              }"
          >
            {{ formatRepairStatus(adminRepair?.repairStatus) }}
          </div>
        </div>
        <!-- 报修内容-->
        <div class="content-section">
          <h4>报修内容：</h4>
          <div v-html="adminRepair.userRepair ? adminRepair.userRepair.content : '暂无报修内容'"></div>
        </div>
      </div>
    </div>
    <!--填写回访弹窗-->
<!--  display: flex; align-items: center;  -->
    <div v-else-if="dialogMode === 'fillReturn'" class="view-content" style="width: 400px; padding: 15px;">
      <div class="repair-detail">
        <!-- 铺垫语，使用可选链显示员工姓名和维修的时间，明确是哪个维修事件，之所以用可选链避免访问未定义的和null的属性时出错误-->
        <p>尊敬的业主，您好！<br>
          您对我们的员工 {{ repairFollow.admin?.adminName }}
          于 {{repairFollow.adminRepair?.repairTime}} 处理的维修是否满意？<br>
          请对我们的处理进行评价，谢谢。</p>
        <el-form ref="returnForm" :model="repairFollow" :rules="rules" label-width="80px">
          <el-form-item label="满意度:" prop="score" style="margin-bottom: 15px; display: flex; align-items: center;">
            <el-rate
                v-model="repairFollow.score"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                show-text
                style="margin-left: 10px;"
                @change="handleScoreChange"
            ></el-rate>
          </el-form-item>
          <el-form-item label="备注:" prop="remark" style="margin-bottom: 15px;">
            <el-input
                type="textarea"
                v-model="repairFollow.remark"
                :maxlength="50"
                resize="none"
                placeholder="请填写意见或建议，不超过50字"
                style="width: 100%; height: 80px;"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer" style="display: flex; justify-content: center; margin-top: 10px;">
        <el-button type="primary" @click="closeDialogAndShowNext">确定</el-button>
      </div>
    </div>
    <!-- 在 slot="footer" 内部控制取消按钮的显示 -->
    <div slot="footer" class="dialog-footer">
      <el-button v-if="dialogMode !== 'fillReturn'"
          @click="dialogFormVisible = false">取 消</el-button>
      <el-button
          v-if="dialogMode==='add'||dialogMode==='update'"
          type="primary"
          @click="dialogMode==='add' ? save() : update()">
        {{dialogMode==='add'?'添加':'修改'}}
      </el-button>
    </div>
  </el-dialog>

</div>
</template>
<script>
import axios from "axios";
import MyEditor from "@/components/MyEditor.vue";
import response from "core-js/internals/is-forced";
export default {
  props: {},
  components: {MyEditor},
  filters: {
    formatDateTime(value) {
      if (!value) return '';
      const date = new Date(value);
      // 使用UTC方法，避免时区转换
      const year = date.getUTCFullYear();
      const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
      const day = date.getUTCDate().toString().padStart(2, '0');
      const hours = date.getUTCHours().toString().padStart(2, '0');
      const minutes = date.getUTCMinutes().toString().padStart(2, '0');
      return `${year}-${month}-${day} `;
    },
  },
  name: "Repairs",//与组件名一样
  data() {
    // 自定义备注校验规则
    const validateRemark = (rule, value, callback) => {
      if (this.repairFollow.score <= 2 && !value) {
        callback(new Error('备注不能为空'));
      } else if (value && value.length > 50) {
        callback(new Error('备注不能超过50字'));
      } else {
        callback();
      }
    };
    return {
      repairFollow:{//回访表单
        complaintId:'',//维修事件id
        adminId:'',
        userId:'',
        followType:'',
        followResult:'',
        updateBy:'',//更新用户，在这里是当前业主id
        remark:'',//详情备注
        score:0,//满意度
        admin:{//用来显示处理该维修事件的员工姓名
          adminName: '',
        },
        adminRepair:{//用来显示处理该维修事件的维修时间
          repairTime:'',
        },
      },
      iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
      dialogMode: 'add', // 弹窗模式，'add' 或 'view'
      dialogTitle: '添加报修信息',//弹窗标题
      dialogFormVisible: false,//弹窗显隐值，默认不出现false
      headers:{"token":window.localStorage.token},
      uploadSever: this.$basePath+'adminRepair/uploadWangEditorPic',//往后端上传图片的路径
      searchAdminRepairs:{//多条件查询from
        creatTime:null,
        updateTime:null,//输入input默认为null
        repairStatus:'',//像这种选择的搜索项默认为空字符串而非null
      },
      addFrom:{//业主提交报修信息到user_repair表，注意添加自动生成的user_time不用写
          creatBy:'',//admin_repair的创建用户id（业主id）
           userRepair:{
             userId:'',//业主id
             content:'',
           },
      },
      rules:{
        content:[
          {required:true,message:'报修内容不能为空',trigger:"blur"},
        ],
        score: [
          {
            required: true,
            message: '请选择满意度评分',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (value === null || value === undefined || value === 0) {
                callback(new Error('请选择满意度评分'));
              } else {
                callback();
                // 满意度变化时重新校验备注
                this.$nextTick(() => {
                  this.$refs.returnForm.validateField('remark');
                });
              }
            },
          },
        ],
        remark: [
          { validator: validateRemark, trigger: 'blur' }
        ],
      },
      options: [{
        value: true,
        label: '已修理'
      }, {
        value: false,
        label: '未修理'
      }],
      value: '',
      //日期选择器
      pickerOptions: {
        disabledDate(time) {
          return false;
        },
        shortcuts: [
            {
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }
        ]
      },
      /*书签。页面加载或刷新时，从后端查询所有repairFollow对象，每个放到repairFollow里，
      * 如果是第一次提交回访，*/
      tableData:[],
      adminRepair:{//list显示的data对象
        id:'',
        user:{
          userName:'',
        },
        creatTime:'',
        admin:{
          adminName:'',
        },
        updateTime:'',
        repairStatus:'',
        userRepair:{
          id:'',
          userId:'',
          content:'',
        },
        followStatus:'',//回访状态，1已回访
        repairFollow:{//用来显示回访详情
          id:'',
          complaintId:'',
          updateTime:'',
          remark:'',
          score:'',
        },
      },
      pendingReturnVisits: [], // 存储需要回访的记录
      currentReturnIndex: -1, // 当前正在处理的回访索引
      // 在前端持久化存储hasVisitedIds，防止刷新后hasVisitedIds置空丢失原记录的数据，从localStorage初始化
      hasVisitedIds:new Set(JSON.parse(localStorage.getItem('hasVisitedIds')||'[]')),// 存储已回访的ID，防止出现弹完当前页所有的回访弹窗后再执行getList方法重复弹窗
      updateFrom:{//修改表单
        id:'',
        user:{
          userName:'',
        },
        admin:{
          adminName:'',
        },
        updateBy:'',
        updateTime:'',
        repairStatus:'',
        userRepair:{
          id:'',
          userId:'',
          content:'',
        },
        beforeRepairPic:{
          id:'',
          beforePic:'',
          updateBy:'',
          updateTime:'',
          adminRepairId:'',
        },
        currentRow:{//删除时临时存储row里的信息
          id:'',//因为是删除，只需要存id就行，后端根据id去删除
          },
        imageDeleted: false,//修改弹框的在线编辑器内图片是否被删除，true为删除
      },
      loading: false, //加载时等待
    }
  },
  watch:{//使用侦听器实现搜索栏为空自动重新搜索，注意repairStatus不选中为空字符串''而不是null
    searchAdminRepairs: {
      handler(newVal) {
        const isCreatTimeEmpty = !newVal.creatTime || newVal.creatTime === '';
        const isUpdateTimeEmpty = !newVal.updateTime || newVal.updateTime === '';
        const isRepairStatusEmpty = newVal.repairStatus === '';
        if (isCreatTimeEmpty && isUpdateTimeEmpty && isRepairStatusEmpty) {
          this.getList(1);
        }
      },
      deep: true,
    }
  },
  created() {
    this.getList(1);
  },
  methods: {
    getList(pageNum) {//作用同equipment.vue里的相同部分
      if(this.searchAdminRepairs.creatTime){
        const date = new Date(this.searchAdminRepairs.creatTime);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        this.searchAdminRepairs.creatTime = `${year}-${month}-${day}`;
      }
      if(this.searchAdminRepairs.updateTime){
        const date = new Date(this.searchAdminRepairs.updateTime);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        this.searchAdminRepairs.updateTime = `${year}-${month}-${day}`;
      }
      this.$axios.post("adminRepair/list",this.searchAdminRepairs,{params:{pageNum:pageNum}}).then((response) => {
        this.tableData = response.data.list;//直接用tableData接收就行
      // 数据加载完成后，检查需要回访的记录
        this.checkReturnVisits();
      });
    },
    // 筛选出需要回访的记录的方法
    checkReturnVisits(){
      // 确保 this.tableData.list 是数组，这里的item就是adminRepair
      if (this.tableData.list && Array.isArray(this.tableData.list)) {
        this.pendingReturnVisits = this.tableData.list.filter((item) => {
          // 已维修但未回访
          const isUnvisited = item.followStatus === false && item.repairStatus === true;
          // 已回访但评分低于3分，需要重新回访
          const isLowScore = item.followStatus === true && item.repairFollow?.score < 3;
          // 未被当前会话处理过
          const isNotVisited = !this.hasVisitedIds.has(item.id);
          return (isUnvisited || isLowScore) && isNotVisited;
        });
        console.log("当前页几个未回访的==>",this.pendingReturnVisits.length);
        this.currentReturnIndex = -1;
        // 如果有需要回访的记录，开始显示弹窗
        if (this.pendingReturnVisits.length > 0) {
          this.showNextReturnDialog();
        }
      }
    },
    // 检查是否还有需要回访的记录
    showNextReturnDialog(){
      this.currentReturnIndex++;
      if(this.currentReturnIndex<this.pendingReturnVisits.length){
        const currentItem = this.pendingReturnVisits[this.currentReturnIndex];
        // 显示弹窗
        this.dialogMode = 'fillReturn';
        this.dialogTitle = '报修反馈';
        this.dialogFormVisible = true;
      // 为在弹窗中显示维修员与维修时间，在这里要对repairFollow赋值
        this.repairFollow.admin = {
          adminName: currentItem.admin?.adminName || '未知管理员',
        };
        this.repairFollow.adminRepair = {
          repairTime: currentItem.repairTime || '暂无维修时间',
        };
      }
    },
    // 关闭当前弹窗方法
    closeDialogAndShowNext(){
      this.$refs.returnForm.validate((valid) => {//回访反馈表单校验
        if (valid) {
          // 标记当前记录为已回访
          const currentItem = this.pendingReturnVisits[this.currentReturnIndex];
          //给repairFollow赋值
          this.repairFollow = {
            remark: this.repairFollow.remark,//保留已填写的字段
            score: this.repairFollow.score,
            followType: this.repairFollow.followType,//用不到
            followResult: this.repairFollow.followResult,//用不到
            adminName: this.repairFollow.adminName,
            repairTime: this.repairFollow.repairTime,
            complaintId: currentItem.id,//维修事件id
            adminId: currentItem.admin?.id ||'',//admin可能为空
            userId: currentItem.user?.id || '',
            updateBy: currentItem.updateBy,
          }
          //标记为已回访过
          this.hasVisitedIds.add(currentItem.id);
          // 存入localStorage
          localStorage.setItem('hasVisitedIds', JSON.stringify([this.hasVisitedIds]));
          //去后端添加一条回访记录
          console.log("这是过滤检查，看看修改时间是否为空===>",this.repairFollow);
          this.$axios.post("repairFollow/insert",this.repairFollow).then(() => {
            this.$message.success("回访提交成功");
            this.dialogFormVisible = false;
            //清空该次的回访满意度和详情
            this.repairFollow = {};
            // 时隔300ms弹出下一个回访弹窗
            setTimeout(() => {
              this.showNextReturnDialog();
            }, 300);
          })
          .catch(() => {
            this.$message.error('回访提交失败');
          });
        }
        else{
          this.$message.warning("请填写完整")
        }
      });
    },
    handleScoreChange(value) {//满意度变化时重新校验备注规则。如果满意度>2，备注非必填，但是填了必须不能为空不能超过50字，满意度小于3，必填
      this.$nextTick(() => {
        this.$refs.returnForm.validateField('remark');
      });
    },
    tableRowClassName({row,rowIndex}) {//table方法，组件自带不能删
      return '';
    },
    handleLook(row){//查看报修信息，显示在线编辑器内容
      this.dialogMode = 'view'
      this.dialogTitle = '报修详情'
      this.adminRepair = row;//不用去数据库查单行adminRepair了，直接使用adminRepair显示当前行信息就行
      this.dialogFormVisible = true;
    },
    resetDialog(){//关闭弹窗时重置内容
    // 重置弹窗内所有表单数据
      this.addFrom = {
         creatBy: '',
         userRepair: {
           userId: '',
           content: ''
         }
      };
      this.updateFrom = {
        id:'',
        user:{
          userName:'',
        },
        creatTime:'',
        admin:{
          adminName:'',
        },
        updateTime:'',
        repairStatus:'',
        userRepair:{
          id:'',
          userId:'',
          content:'',
        },
      }
    },
    handleAdd(){//只是弹出添加弹窗
      this.dialogMode = 'add'
      this.dialogTitle = '添加报修信息'
      this.dialogFormVisible = true
      //重置表单
      this.addFrom = {
        creatBy:'',
        userRepair:{
          userId:'',//业主id
          content:'',
        }
      }
    },
    save() {//保存添加
      if(this.addFrom.userRepair.content!=="<p><br></p>"){//报修内容不能为“空”
        this.addFrom.userRepair.userId = 1 // 用户id暂时写死1,要从token取
        this.addFrom.creatBy = this.addFrom.userRepair.userId//给creatBy赋值
        this.axios.post(`adminRepair/insertUserRepair`, this.addFrom)
           .then((response) => {
             this.getList(1)
             this.dialogFormVisible = false
             this.$message.success('提交成功')
           })
           .catch(error => {
             this.$message.error('提交失败：' + error.message)
           });
        this.dialogFormVisible = false;
      }
      else{
        this.$message.error('报修内容不能为空');
      }
    },
    handleUpdate(row){//只显示修改前的报修信息
      //如果维修状态是"已修理"，则不进行任何操作
      if(row.repairStatus===true){
        return
      }
      //1.设置值
      this.dialogFormVisible = true;
      this.dialogMode = 'update'
      this.dialogTitle = '修改报修信息'
      //判空
      if(row.userRepair && row.userRepair.id){//判空
        this.$axios.get(`adminRepair/`+row.id).then((response) => {
          this.updateFrom = response.data.adminRepair;
        });
      }
    },
    update(){//业主修改自己提交过的报修信息
      /*注意，当该条维修记录的维修状态为“已修理”时，业主不可修改之前提交的报修信息，
      如果不满意走回访路线，提交“不满意”，（防止物业那边乱套），则该条报修事件的修理状态自动变为未修理，
      此时用户可以（不过一般不需要）修改该条记录之前的报修信息，方便给物业补充设备其他的故障信息便于维修*/
      if(this.updateFrom.userRepair.content!=="<p><br></p>"){//报修内容判空，为空不能提交
        //1.提交前设置相关的参数
        this.updateFrom.updateBy = 1//暂时写死，将来去token取userid
        this.updateFrom.repairStatus = false//业主修改为false
        this.updateFrom.beforeRepairPic.updateBy = this.updateFrom.updateBy//还要给beforeRepairPic.updateBy赋值
        //2.动态监测图片状态
        const editor = this.$refs.editor?.editor;//获取编辑器对象
        const hasImage = editor?.getElemsByType("image").length > 0;//检查editor里是否有图片
        this.updateFrom.imageDeleted = !hasImage;//无图片设为true
        //3.去后端修改
        this.axios.post(`adminRepair/userUpdateAdminRepair`, this.updateFrom)
            .then((response) => {
              this.getList(1)
              this.dialogFormVisible = false
              this.$message.success('提交成功')
            })
            .catch(error => {
              this.$message.error('提交失败：' + error.message)
            });
      }
      else{
        this.$message.error('修改内容不能为空')
      }
    },
    handleDelete(row){//业主逻辑删除自己提交过的报修记录
      this.currentRow = row;
      this.$confirm(
          `确定要删除这条报修信息吗?`,
          '提示',
          {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
            dangerouslyUseHTMLString: true
          }
      )
      .then(() => {//去后端删除
        this.$axios.post("adminRepair/delete",this.currentRow).then((response) => {
          this.getList(1);
          this.$message.success(response.data.message||"删除了一条报修记录");
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
      })
      .catch(() => {
            //这个catch的意义是：用户点"否“，时解决Uncaught(in promise)cancel 的错误，
      });
    },
    handlePageNumChange(pageNum) {//更改页码
    this.getList(pageNum);
    },
    formatRepairStatus(cellValue) {
    if (cellValue === true) return '已修理';
    if (cellValue === false) return '未修理';
    return '未知状态'; // 处理 null/undefined
    },
    // 添加时间格式化方法,为updateTime设置时间格式用
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  },
}
</script>
<!--遵循该模版样式，样式别动！-->
<style>
.fromTextarea{
  min-height: 120px;
}
.headerBg {
  background: #eee!important;
}
.fontSize18{
  font-size: 18px;
}
.fontSize12{
  font-size: 12px;
}
.pageNum{
  display: flex;
  justify-content: center; /* 水平居中 */
  padding-top: 30px;
}
.updateRepairsTime{
  margin-left: 5px;
}
el-table{
  text-align: center;
}
/* 表头居中 */
.el-table th > .cell {
  text-align: center;
}
/* 单元格内容居中 */
.el-table .cell {
  text-align: center;
}
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
/*弹窗样式*/
.view-content {
  padding: 20px;
}

/* 使详情内容更美观 */
.el-descriptions {
  margin-top: 20px;
}

.el-descriptions-item__label {
  width: 100px;
  text-align: right;
}
.repair-detail {
  padding: 20px;
  line-height: 1.8;
}
.content-box {
  padding: 10px;
  background: #f8f8f8;
  border-radius: 4px;
  margin-bottom: 15px;
}
.status-badge {
  display: inline-block;
  padding: 2px 12px;
  background: #e6f7ff;
  color: #1890ff;
  border-radius: 4px;
}
/*查看报修详情的维修状态为未修理时为红字，已修理为蓝字*/
.repaired {
  color: blue;
}
.unrepaired {
  color: red;
}
.unknown {
  color: gray;
}
</style>